<template>
  <div>
  <div class="title">热门推荐</div>
  <ul>
    <li class="item border-bottom" v-for="item of recommendList" :key="item">
      <!-- <div class="item-img-wrapper"> -->
        <img class="item-img" :src="item.imgUrl" />
      <!-- </div> -->
      <div class="item-info">
        <p class="item-title">{{item.heading}}</p>
        <p class="item-desc">{{item.text}}</p>
        <button class="item-button">查看详情</button>
      </div>
    </li>
  </ul>
  </div>
</template>
<script>
export default {
 name: "HomeRecommend",
 data () {
   return {
     recommendList:[{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第1次',
       heading:'di1',
     },{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第2次',
       heading:'di2',
     },{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第3次',
       heading:'di3',
     },{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第4次',
       heading:'di4',
     },{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第5次',
       heading:'di5',
     }]
   }
 }
};
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title
  
.title
  margin-top .2rem;
  line-height .8rpx;
  background :#eee;
  text-indent :.2rem;
.item
  overflow :hidden;
  display :flex;
  height :1.9rem;
 .item-img
  width: 1.7rem;
  height :1.7rem;
  padding:.1rem; 
 .item-info
  flex :1
  padding :.1rem
  min-width :0
  .item-title
   line-height :.54rem
   font-size :.32rem
   ellipsis()
  .item-desc
   line-height :.4rem
   color :#ccc
   ellipsis()
  .item-button
   line-height .44rem
   background #ff9300
   margin-top :.16rem
   padding :0 .2rem
   border-radius :.06rem
   color :#fff 



</style>
